<template>
	<view class="page">
		<u-navbar title="用户管理" :is-back="true"
			background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat">
		</u-navbar>
		<view><button @click="exportClick()">导出</button></view>
	</view>
</template>

<script>
	import * as XLSX from '@/common/utils/xlsx.core.min.js' //xlsxjs文件路径
	export default {
		data() {
			return {}
		},
		mounted() {
			console.log(XLSX)
		},
		methods: {
			/**
			 * 导出事件
			 */
			exportClick() {
				const header = ['date', 'defaultType', 'device']
				const headerName = {
					date: '出生日期',
					defaultType: '姓名',
					device: '性别'
				}
				const ExcelData = [{
					date: '2022-02-02',
					defaultType: '张三',
					device: '男'
				}, {
					date: '2022-02-03',
					defaultType: '李四',
					device: '女'
				}]
				this.json2Excel(ExcelData, header, headerName, '相关人员')
			},
			/**
			 * json转化xlsx
			 * @param {Object} data 数据
			 * @param {Object} header header为数据源属性名
			 * @param {Object} headerName 表头文案
			 * @param {Object} fileName 文件名 ps:这里我写死了 可自行修改
			 */
			json2Excel(data, header, headerName, fileName) {
				let wopts = {
					bookType: 'xlsx',
					bookSST: false,
					type: 'binary',
				}
				let workBook = {
					SheetNames: ['Sheet1'],
					Sheets: {},
					Props: {},
				}
				const newData = [headerName, ...data]
				// 1.XLSX.utils.json_to_sheet(data)接受一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表
				//默认的列顺序由使用Object.keys的字段的第一次出现确定
				// 2.将数据放入对象workBook的Sheets中等待输出
				//加了一句skipHeader:true，这样就会忽略原来的表头
				workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(newData, {
					header: header,
					skipHeader: true
				})
				// 3.XLSX.write()开始编写Excel表格
				// 4.changeData()将数据处理成需要的输出的格式
				console.log(this.changeData(XLSX.write(workBook, wopts)))
				let time = new Date().getTime()
				const StrData = this.changeData(XLSX.write(workBook, wopts))
				const fs = wx.getFileSystemManager() //获取全局唯一的文件管理器
				fs.writeFile({
					filePath: wx.env.USER_DATA_PATH +
					`/相关人员${time}.xlsx`, // wx.env.USER_DATA_PATH 指定临时文件存入的路径，后面字符串自定义
					data: StrData,
					encoding: 'binary', //二进制流文件必须是 binary
					success(res) {
						uni.hideLoading()
						wx.openDocument({
							// 打开文档
							filePath: wx.env.USER_DATA_PATH + `/相关人员${time}.xlsx`, //拿上面存入的文件路径
							showMenu: true, // 显示右上角菜单
							success: function(res) {},
							fail: function() {
								uni.showToast({
									title: `打开失败`,
									icon: 'error',
									duration: 2000,
								})
							},
						})
					},
				})
			},
			/**
			 * 将数据处理成需要的输出的格式
			 * @param {Object} s XLSX输入
			 */
			changeData(s) {
				//如果存在ArrayBuffer对象(es6)最好采用该对象
				if (typeof ArrayBuffer !== 'undefined') {
					//1.创建一个字节长度为s.length的内存区域
					let buf = new ArrayBuffer(s.length)
					//2.创建一个指向buf的Unit8视图，开始于字节0,直到缓冲区的末尾
					let view = new Uint8Array(buf)
					//3.返回指定位置的字符的Unicode编码
					for (let i = 0; i != s.length; ++i) {
						view[i] = s.charCodeAt(i) & 0xff
					}
					return buf
				} else {
					let buf = new Array(s.length)
					for (let i = 0; i != s.length; ++i) {
						buf[i] = s.charCodeAt(i) & 0xff
					}
					return buf
				}
			},
		},
	}
</script>